import { Fragment, useState } from "react";
import { DragProps } from "../hoc/withDragEvent";
import getAnchor from "../utils/getAnchor";
import Anchor from "./Anchor";

export default function Rect(props: DragProps) {
  const { x, y } = props;
  const [isInside, setIsInside] = useState(false);
  return (
    <Fragment>
      <rect
        width="100"
        height="100"
        fill="red"
        {...props}
        onMouseEnter={() => setIsInside(true)}
        onMouseMove={() => setIsInside(true)}
        onMouseLeave={() => {
          setTimeout(() => setIsInside(false), 1500);
        }}
      ></rect>
      <Anchor
        {...getAnchor(x, y, "100", "100")}
        isInside={isInside}
        showAnchor={() => setIsInside(true)}
      ></Anchor>
    </Fragment>
  );
}
